<template>
  <div class="container">
    <!-- <baidu-map> </baidu-map> -->
    <baidu-map
      class="bm-view"
      :key="locationKey"
      :markerList="markerList"
      @onClickMarker="onClickMarker"
    >
    </baidu-map>
    <div class="content">
      <el-row>
        <el-col :span="24">
          <el-input
            maxlength="50"
            v-model="query.search"
            placeholder="请输入单位名称/信用代码/工作站名称"
          ></el-input
        ></el-col>
      </el-row>
      <rz-height></rz-height>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-select
            :disabled="$route.query.code != 320500"
            v-model="query.parentCode"
            placeholder="请选择单位所属区域"
          >
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="6">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="exportTable">导出</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <div class="list_wapper">
        <el-empty description="暂无数据" v-if="!list.length"></el-empty>
        <div :key="item.identify" class="list" v-for="item in list" @click="workstation(item)">
          <div class="row">
            <div class="name">{{ item.workStationName || "待完善" }}</div>
            <div class="score green"  @click.stop="scoreHandle(item)" v-if="item.indexScore>79">{{ item.indexScore }}分</div>
            <div class="score yellow"  @click.stop="scoreHandle(item)" v-else-if="item.indexScore>59">{{ item.indexScore }}分</div>
            <div class="score red"  @click.stop="scoreHandle(item)" v-else>{{ item.indexScore }}分</div>
          </div>
          <div class="tag_wapper">
            <el-tag size="small" type="warning">{{ item.districtName }}--{{item.streetName}}</el-tag>
            <el-tag size="small">经营单位数{{ item.businessUnits }}家</el-tag>
 <el-tag size="small" v-if="$route.query.code == 320500">全市第{{ item.cityRanking }}名</el-tag>
 <el-tag size="small" type="success"  v-else>{{item.districtName}}第{{ item.districtRanking }}名</el-tag>
            <!-- $route.query.code != 320500 -->
            <!-- cityRanking 市排名、区districtRanking -->
            <!-- <div class="green">综合得分{{ item.indexScore }}分</div> -->
            <!-- <el-tag size="small" type="success"
              >综合得分{{ item.indexScore }}分</el-tag
            > -->
          </div>

          <div class="row">
            <div>{{ item.identify }}</div>
            <div>{{ item.createDateTimeStr }}</div>
          </div>
          <div class="row">{{ item.unitName }}</div>
          <div class="row">{{ item.address }}</div>
        </div>
      </div>
      <rz-height></rz-height>

      <el-pagination
        class="right"
        v-show="list.length"
        @current-change="currentPage"
        small
        layout="total, prev,pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="location" @click="location">
      <i class="el-icon-aim"></i>
    </div>
  </div>
</template>
<script>
// import BaiduMap from "@/views/home/map/components/qqMap";
import BaiduMap from "@/views/home/map/components/BaiduMap";
// import BaiduMap from "@/views/home/map/components/testMap";

export default {
  name:"maps",
  // props:[],
  // 页面加载
  created() {
    if (this.$route.query.code) {
      this.query.parentCode = this.$route.query.code;
    } else {
      this.query.parentCode = "320500";
    }
    this.getList();
    this.onSearch();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      locationKey: 0,
      query: {
        parentCode: "320500",
        search: "",
        pageIndex: 1,
        pageSize: 10,
      },
      regionList: [
        {
          value: "320500",
          label: "苏州市",
        },
        {
          value: "320506",
          label: "吴中区",
        },

        {
          value: "320507",
          label: "相城区",
        },
        {
          value: "320505",
          label: "高新区",
        },
        {
          value: "320508",
          label: "姑苏区",
        },
        {
          value: "320509",
          label: "工业园区",
        },
        {
          value: "320581",
          label: "常熟市",
        },
        {
          value: "320582",
          label: "张家港市",
        },
        {
          value: "320583",
          label: "昆山市",
        },
        {
          value: "320584",
          label: "吴江区",
        },
        {
          value: "320585",
          label: "太仓市",
        },
        {
          value: "320592",
          label: "张家港保税区",
        },
      ],
      markerList: [],
      list: [],
      total: 0,
    };
  },
  // 方法
  methods: {
    getList() {
      this.$http
        .findWorkstationMapList({
          parentCode: this.query.parentCode,
          search: "",
          pageIndex: 0,
          pageSize: 0,
        })
        .then((res) => {
          console.log(res.data);
          res.data.list.forEach((x) => {
            x.show = false;
          });
          this.markerList = res.data.list;
        });
    },
    location() {
      this.locationKey++;
    },
    onClickMarker(e) {
      this.markerList.forEach((x) => {
        if (x.identify == e) {
          x.show = !x.show;
        }
      });
    },
    onSearch() {
      this.$http.findWorkstationMapList(this.query).then((res) => {
        // console.log(res);
        this.list = res.data.list;
        this.total = res.data.total;
      });
    },
    currentPage(e) {
      this.query.pageIndex = e;
      this.onSearch();
    },
    exportTable() {
      if (this.list.length == 0) return this.$error("暂无数据");
      let { VUE_APP_ADMIN_API } = process.env;
      this.$downloadFiles(
        `${VUE_APP_ADMIN_API}/food/safety/workstation/exportQueryWorkstationMap?parentCode=${this.query.parentCode}&search=${this.query.search}`
      );
    },
    workstation(e){
      if(e.workStationName){
        sessionStorage.setItem("workId", e.workId)
        this.$router.push(`/workstation`)
      }
    },
    scoreHandle(e){
         if(e.workStationName){
        sessionStorage.setItem("workId", e.workId)
         this.$router.push(`/workstationScore`)
      }
    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    BaiduMap: BaiduMap,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .content {
    position: absolute;
    left: 2%;
    top: 2%;
    background-color: #fff;
    padding: 10px;
    width: 550px;
    z-index: 1000;
  }
  .location {
    position: absolute;
    right: 2%;
    bottom: 5%;
    padding: 5px;
    background-color: #fff;
    z-index: 1000;
    cursor: pointer;
    .el-icon-aim {
      font-size: 25px;
    }
  }
  .list_wapper {
    max-height: 500px;
    overflow-y: auto;
    .list {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      .row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        align-items: center;
        font-size: 14px;
        .left {
          display: flex;
          align-items: center;
        }
        .name {
          font-size: 16px;
          font-weight: 700;
          margin-right: 10px;
        }
        .score{
          text-decoration: underline;
          font-weight: bold;
          font-size: 16px;
          cursor: pointer;
        }
      }

      .tag_wapper {
        display: flex;
        align-items: center;
        .el-tag {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>